<template>
  <div id="userProfilePage">
    <a-card title="个人设置" style="max-width: 600px; margin: 0 auto;">
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        layout="vertical"
        @finish="handleSubmit"
      >
        <a-form-item label="用户名" name="userName">
          <a-input v-model:value="formData.userName" placeholder="请输入用户名" />
        </a-form-item>

        <a-form-item label="用户简介" name="userProfile">
          <a-textarea
            v-model:value="formData.userProfile"
            placeholder="请输入用户简介"
            :rows="4"
          />
        </a-form-item>

        <a-form-item label="头像URL" name="userAvatar">
          <a-input v-model:value="formData.userAvatar" placeholder="请输入头像URL" />
        </a-form-item>

        <a-form-item v-if="formData.userAvatar" label="头像预览">
          <a-image :src="formData.userAvatar" :width="120" />
        </a-form-item>

        <a-form-item label="账号">
          <a-input :value="loginUserStore.loginUser.userAccount" disabled />
        </a-form-item>

        <a-form-item label="用户角色">
          <a-tag v-if="loginUserStore.loginUser.userRole === 'admin'" color="green">
            管理员
          </a-tag>
          <a-tag v-else color="blue">
            普通用户
          </a-tag>
        </a-form-item>

        <a-form-item label="注册时间">
          <span>{{ dayjs(loginUserStore.loginUser.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit" :loading="loading">
              保存修改
            </a-button>
            <a-button @click="resetForm">
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { updateUserUsingPost } from '@/api/userController'
import dayjs from 'dayjs'

const loginUserStore = useLoginUserStore()
const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive({
  userName: '',
  userProfile: '',
  userAvatar: ''
})

// 表单验证规则
const rules = {
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 20, message: '用户名长度在1-20个字符', trigger: 'blur' }
  ]
}

// 初始化表单数据
const initFormData = () => {
  const user = loginUserStore.loginUser
  formData.userName = user.userName || ''
  formData.userProfile = user.userProfile || ''
  formData.userAvatar = user.userAvatar || ''
}

// 重置表单
const resetForm = () => {
  initFormData()
}

// 提交表单
const handleSubmit = async () => {
  try {
    loading.value = true
    const updateData = {
      id: loginUserStore.loginUser.id,
      ...formData
    }
    const res = await updateUserUsingPost(updateData)
    if (res.data.code === 0) {
      message.success('更新个人信息成功')
      // 更新本地用户信息
      await loginUserStore.fetchLoginUser()
    } else {
      message.error('更新失败：' + res.data.message)
    }
  } catch (error) {
    message.error('更新失败')
    console.error('更新个人信息失败:', error)
  } finally {
    loading.value = false
  }
}

// 页面加载时初始化数据
onMounted(() => {
  initFormData()
})
</script>

<style scoped>
#userProfilePage {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}
</style>
